<template>
  <div class="ast" :class="toastType">
    <i class="iconfont" :class="$store.state.toastIcon"></i
    ><span>{{ $store.state.toastMsg }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    toastType() {
      var type = "success";
      switch (this.$store.state.toastIcon) {
        case "icon-toast-shibai_huaban":
          type = "dander";
          break;

        case "icon-toast-jinggao":
          type = "warnning";
          break;
        default:
          "icon-toast_chenggong";
      }
      return type;
    },
  },
};
</script>
 
<style lang = "less" scoped>
.ast {
  position: fixed;
  top: 50px;
  left: 50%;
  transition: translate(-50%);
  background-color: #ccc;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 1px 2px 10px 1px;
  border: 1px solid #ccc;
  .iconfont {
    margin-right: 10px;
  }
  &.success {
    background-color: rgb(50, 252, 90);
    color: rgb(35, 174, 0);
  }
  &.dander {
    background-color: rgb(248, 69, 69);
    color: rgb(201, 17, 17);
  }
  &.warnning {
    background-color: #f0ad4e;
    color: rgb(245, 245, 245);
  }
}
</style>